<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'
import type { RuningDetail } from '@/types/custom'
import { isNumber } from 'xe-utils'

interface Props {
  activities: RuningDetail[]
}

defineProps<Props>()

const labels = new Map([
  [0, '提交'],
  [1, '结束'],
  [2, '审批'],
  [3, '抄送']
])

const getNeedClassName = (activity: RuningDetail) => {
  if (isNumber(activity.approvalType) && activity.approvalType !== 0) {
    return 'bg-danger-light border-danger'
  } else if (activity.nodeType && [0, 1].includes(activity.nodeType)) {
    return 'bg-success-light border-success'
  } else if (!activity.id) {
    return 'bg-primary-light border-primary'
  } else {
    return 'border-primary'
  }
}

const approvalUserLabel = (activity: RuningDetail) => {
  return labels.get(activity.nodeType || 0) || '未知'
}
</script>

<template>
  <ul class="flex overflow-x-auto need-timeline">
    <li
      v-for="(activity, index) in activities"
      :key="index"
      class="need-timeline-item flex align-center flex-shrink mb5"
    >
      <div
        class="need-timeline-content flex flex-column justify-center h100"
        :class="getNeedClassName(activity)"
      >
        <div class="flex align-center">
          <span class="mr5">{{ activity.nodeName }}</span>
          <span class="font12 color-info ml-auto">{{ activity.modifiedOnString }}</span>
        </div>
        <div class="flex font12">
          <div v-if="activity.submitUser">
            <span class="color-info">提交人：</span>
            <span>{{ activity.submitUser }}</span>
          </div>
          <div v-if="activity.approvalUser">
            <!--                texts[activity.nodeType]-->
            <span class="color-info">{{ approvalUserLabel(activity) }}：</span>
            <span>{{ activity.approvalUser }}</span>
            <span v-if="activity.approvalTypeString && activity.nodeType === 2"
              >（{{ activity.approvalTypeString }}）</span
            >
          </div>
          <div v-if="activity.remark" class="font12 ml5">
            <span class="color-info">意见：</span>
            <span class="color-warning">{{ activity.remark }}</span>
          </div>
        </div>
      </div>
      <el-icon v-if="index !== activities.length - 1" class="mx3">
        <ArrowLeft />
      </el-icon>
    </li>
  </ul>
</template>
<style lang="scss" scoped>
.need-timeline {
  .need-timeline-item {
  }

  .need-timeline-content {
    border-radius: 3px;
    padding: 3px 5px;
  }
}
</style>
